<html>
    <head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.11.0.js"></script>
    <script src="gen.js"></script>
    <script>

        //makes a synchronous call to the page u and return the
        //result as object
        var x;
        function syncAjax(u){
            var obj=$.ajax(
                {url:u,
                    async:false
                }
            );
            return $.parseJSON(obj.responseText);

        }
        function get_service(id)
        {
            x = id;
            var u="service_action.php?cmd=1&id="+x;

            return syncAjax(u);
        }

        function edit(obj,id){
            var r=get_service(id);

            if(r.result==0){
                //show error message
                return;

            }

            //get the data from object r and put it in the form

            $("#service_id").prop("value", r.service.service_id);
            $("#service_offered").prop("value", r.service.service_offered);
            $("#household_id").prop("value", r.service.household_id);
            $("#community_member_id").prop("value", r.service.community_member_id);
            $("#date_offered").prop("value",r.service.date_offered);


            //show the form
            //find where the user clicked and store it in x and y
            var y=event.clientY;
            var x=event.clientX/2;
            //use x and y to set the location of the form
            $("#divEdit").css("top",y);
            $("#divEdit").css("left",x);
            //display the form
            $("#divEdit").fadeIn(300);
        }
        function add(obj)
        {
            $("#service_id").prop("value", "");
            $("#service_offered").prop("value", "");
            $("#household_id").prop("value", "");
            $("#community_member_id").prop("value", "");
            $("#date_offered").prop("value","");

            var y= event.clientY;
            var x= event.clientX/2;
            //use x and y to set the location of the form
            $("#divAdd").css("top",y);
            $("#divAdd").css("left",x);
            //display the form
            $("#divAdd").fadeIn(500);

        }

        //returns a result object for one vaccine


        //makes asynchronous call to the save page

        function save()
        {
            //complete the url
            var sid = document.getElementById("service_id").value;
            var sof = document.getElementById("service_offered").value;
            var hsd = document.getElementById("household_id").value;
            var cid = document.getElementById("community_member_id").value;
            var dof = document.getElementById("date_offered").value;
            //var id =5;
            var u="service_action.php?cmd=3&sid="+sid
                +"&sof="+sof
                +"&hsd="+hsd
                +"&cid="+cid
                +"&dof="+dof;

            alert(u);
            $.getJSON(u,saveDone);
            window.location.reload();
            //fade out the form in half a second
            $("#divEdit").css("background-color","GG0000");
            $("#divEdit").fadeOut(300); // hides any html object

            return syncAjax(u);
        }

        function delete_sv(obj,id)
        {
            var r=get_service(id);
            // alert(r);
            if(r.result==0){
                //show error message
                return;
            }

            //get the data from the object r and put it in the form
            $("#service_id").prop("value", r.service.service_id);
            $("#service_o").prop("value", r.service.service_offered);
            $("#house_hd").prop("value", r.service.household_id);
            $("#c_member").prop("value", r.service.community_member_id);
            //show the form
            //find where the user clicked and store it in x and y
            var y=event.clientY;
            var x=event.clientX/2;
            //use x and y to set the location of the form
            $("#divDelete").css("top",y);
            $("#divDelete").css("left",x);
            //display the form
            $("#divDelete").fadeIn(300);
        }

        function delete_s()
        {

            var u="service_action.php?cmd=5&sd="+x;
            alert(u);

            $("#divDelete").fadeOut(500); // hides any html object
            alert("Deleted");
            location.reload();

            return syncAjax(u);

        }

        function save_add()
        {
            //complete the url
            var sf=$("#offered").val();
            var hd=$("#household").val();
            var cm=$("#member_id").val();
            var df=$("#date").val();
            var u="service_action.php?cmd=4&sf="+sf+"&hd="+hd+"&cm="+cm+"&do="+df;
            alert(u);

            $.getJSON(u,saveDone);
            //reload
            window.location.reload();
            cancel_add();
        }

        function saveDone(data){

            alert(data);
        }
        function cancel_add()
        {

            $("#divAdd").fadeOut(500);
        }
        //hides the form
        function cancel(){
            //fade out the form in half a second

            $("#divEdit").fadeOut(500); // hides any html object
        }
        function cancel_s()
        {
            //fade out the form in half a second
 
            $("#divDelete").fadeOut(500); // hides any html object
        }
        function search_services(){
					
				var sid = document.getElementById("txtSearch").value;	
			
				var u="service_action.php?cmd=6&sid="+sid;

				var r= syncAjax(u);
				$('.row1').remove();
				$('.row2').remove();

				var tid = $("#searchTable");
				
				  var i = 0;
                   while (i < r.service.length) {
                   	var row = document.getElementById("searchTable").insertRow(i+1);
//                         alert(row);
                        
                   	var cell = row.insertCell(0);
                   	var cell1 = row.insertCell(1);
                   	var cell2 = row.insertCell(2);
                   	var cell3 = row.insertCell(3);
                   	var cell4 = row.insertCell(4);
                   	var cell5 = row.insertCell(5);
                        
                        

                   	cell.innerHTML = r.service[i].service_id;
                   	cell1.innerHTML = r.service[i].service_offered;
                   	cell2.innerHTML = r.service[i].household_id;
                   	cell3.innerHTML = r.service[i].community_member_id;
                   	cell4.innerHTML = r.service[i].date_offered;
                   	cell5.innerHTML = "<span class='hotspot' onclick= 'edit(this,"+r.service[i].service_id+")'>edit</span>";
//                   	 alert(r.service[i].id);
                   	i++;
                   }
               }
    </script>

</head>
<body>
<table>
    <tr>
        <td colspan="2" id="pageheader">
            <h3>Health Information System</h3>
        </td>
    </tr>
    <tr>
        <td id="mainnav">
            <div class="menuitem">location</div>
            <div class="menuitem">opd cases</div>
            <div class="menuitem">health promotion</div>
            <div class="menuitem">nutrition</div>
            <div class="menuitem">child welfare</div>
            <div class="menuitem"><a href = 'service_view.php'>family planning</a></div>
        </td>

        <td id="content">
            <div id="divPageMenu">
                <span class="menuitem" >sub districts</span> |
                <span class="menuitem" >communities</span> |
                <span class="menuitem" >view map</span> |
                <input type="text" id="txtSearch">
                <span class="menuitem"onclick='search_services()'>search</span> 
            </div>
            <div id="divStatus" class="status">
                status message
            </div>
            <div id="divPageMenu">
                <span class="menuitem"><a href="school_view.php" >Schools Visits</a></span> |
                <span class="menuitem"><a href="household_view.php">Households Visits</a></span> |
                <span class="menuitem"><a href="community_members_view.php">Community Members</a></span> |
                <span class="menuitem"><a href="community_list.php">Communities</a></span> |
                <span class="menuitem"><a href="service_view.php">Family Planning Service</a></span>
            </div>
            <div id="divContent">
                <b><p align = "center">FAMILY PLANNING SERVICE</p></b>
                <span class='hotspot' onclick='add(this)'>Add Service</span>
                <table class="reportTable" width="100%" id="searchTable">
                    <tr class="header" >
                        <td>ID</td>
                        <td>SERVICE OFFERED</td>
                        <td>HOUSEHOLD</td>
                        <td>COMMUNITY MEMBER</td>
                        <td>DATE</td>
                        <td></td>
                        <td></td>
                    </tr>
            </div>
            <div id="divStatus" class="status">

            </div>
            <div id="divContent">
                <?php
                // including the schools class for method calls
                include_once("service.php");

                //call methods here to test
                $obj =  new service();
                if (!$obj->get_all_services())
                {
                    echo "error";
                    exit();
                }


                $row=$obj->fetch();
                $row_counter=0;
                while($row){

                    if($row_counter%2==0)
                    {
                        $style=" class='row1' ";
                    }
                    else
                    {
                        $style=" class='row2'  ";
                    }
                    $id=$row['service_id'];
                    echo "<tr $style >";
                    echo "<td>$id</td>";
                    echo "<td>$row[service_offered]</td>";
                    echo "<td>$row[household_id]</td>";
                    echo "<td>$row[community_member_id]</td>";
                    echo "<td>$row[date_offered]</td>";
                    echo "<td><span class='hotspot' onclick='edit(this,$id)'>edit<span></td>";
                    echo "<td><span class='hotspot' onclick='delete_sv(this,$id)'>delete<span></td>";
                    echo "</tr>";
                    $row=$obj->fetch();
                    $row_counter++;
                }
                ?>
</table>
</div>
</td>
</tr>
</table>
<div id="divEdit" class = "popupForm">
    <table class="tableForm" >
        <tr>
            <td class="label">Service Offered</td>
            <td class="field"><input type="text" value="<?php echo $row['service_offered'] ?>" id="service_offered" ></td>
        </tr>
        <tr>
            <td class="label">Household</td>
            <td class="field"><input type="text" value="" id="household_id" >
            </td>
        </tr>
        <tr>
            <td class="label">Community Member</td>
            <td class="field"><input type="text" value="" id="community_member_id" >
            </td>
        </tr>
        <tr>
            <td class="label">Date</td>
            <td class="field"><input type="text" value="" id="date_offered" >
            </td>
        </tr>
        <tr>
            <td class="label"></td>
            <td class="field">
                <input type="button" value="save" onclick="save()" >
                <input type="button" value="cancel" onclick="cancel()" >
            </td>
        </tr>
        <input type="hidden" value="<?php echo $row['service_id'] ?>" id ="service_id" >
    </table>
</div>
<div id="divAdd" class="popupForm">
    <table class="tableForm" >
        <tr>
            <td class="label">Service Offered</td>
            <td class="field"><input type="text" value="" id="offered" ></td>
        </tr>
        <tr>
            <td class="label">Household</td>
            <td class="field"><input type="text" value="" id="household" >
            </td>
        </tr>
        <tr>
            <td class="label">Community Member</td>
            <td class="field"><input type="text" value="" id="member_id" >
            </td>
        </tr>
        <tr>
            <td class="label">Date</td>
            <td class="field"><input type="text" value="" id="date" >
            </td>
        </tr>
        <tr>
            <td class="label"></td>
            <td class="label">
                <input type="button" value="save" onclick="save_add()" >
                <input type="button" value="cancel" onclick="cancel_add()" >
            </td>
        </tr>
    </table>
</div>
<div id="divDelete" class = "popupForm">

    <table class="tableForm" >
        <tr>
            <div class="label">Are you sure you want to delete?</div>
            <td class="label">Service Offered</td>
            <td class="field"><input type="text" value="<?php echo $row['service_offered'] ?>" id="service_o" ></td>
        </tr>
        <tr>
            <td class="label">Household</td>
            <td class="field"><input type="text" value="" id="house_hd" >
            </td>
        </tr>
        <tr>
            <td class="label">Community Member</td>
            <td class="field"><input type="text" value="" id="c_member" >
            </td>
        </tr>
        <tr><td class="label"></td>
            <td class="field">
                <input type="button" value="Yes" onclick="delete_s()" >
                <input type="button" value="No" onclick="cancel_s()" >
            </td>
        </tr>
        <input type="hidden" value="<?php echo $row['service_id'] ?>" id ="service_id" >

    </table>

</div>
</body>
</html>	